<template>
  <VCharts
    :option="options"
    :autoresize="autoResize"
    :style="{ width, height }"
    v-if="isShowChart"
  />
  <ga-empty
    v-show="!isShowChart"
    :style="{ height, ...emptyStyle }"
    :img-src="noDataImg"
  />
</template>

<script setup>
import { nextTick, ref } from "vue";
import VCharts from "vue-echarts";
// import myMacarons from "./config"; // 定制主题颜色
// echarts.registerTheme("myMacarons", myMacarons);
const props = defineProps({
  options: {
    type: Object,
    default() {
      return {};
    },
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  noDataImg: {
    type: Object,
    default: () => null,
  },
});
// console.log(props.height, 'height in charts');
const emits = defineEmits(["on-chart-ready"]);
const emptyStyle = {
  margin: 0,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "column",
};

// const isShowChart = computed(() => {
//   return props.options.series?.length > 0 && props.options.series[0]?.data?.length > 0;
// });
const isShowChart = ref(false);
// wait container expand
nextTick(() => {
  isShowChart.value = true;
});
// defineExpose({
//   echartInstance: chartRef,
//   getChartRef: () => chartRef.value,
// });
</script>

<style scoped lang="scss"></style>
